<div [@routerTransition]>
  <div class="m-subheader ">
    <div class="d-flex align-items-center">
      <div class="mr-auto col-xs-6">
        <h3 class="m-subheader__title m-subheader__title--separator">
          <span>工装管理</span>
        </h3>
        <button
          type="button"
          (click)="showAction(1)"
          class="btn btn-outline-primary m-btn m-btn--custom m-btn--outline"
        >
          <i class="fa fa-shopping-cart"></i>借出
          <!-- <span class="m-badge m-badge--danger">2</span> -->
        </button>
        <button
          type="button"
          (click)="showAction(2)"
          class="btn btn-outline-success m-btn m-btn--custom m-btn--outline"
        >
          <i class="fa fa-shopping-cart"></i>返修
        </button>
        <button
          type="button"
          (click)="showAction(3)"
          class="btn btn-outline-warning m-btn m-btn--custom m-btn--outline"
        >
          <i class="fa fa-shopping-cart"></i>送检
        </button>
        <button
          type="button"
          (click)="showAction(4)"
          class="btn btn-outline-info m-btn m-btn--custom m-btn--outline"
        >
          <i class="fa fa-shopping-cart"></i>技改
        </button>
        <button
          type="button"
          (click)="showAction(5)"
          class="btn btn-outline-warning m-btn m-btn--custom m-btn--outline"
        >
          <i class="fa fa-shopping-cart"></i>隔离
        </button>
        <button
          type="button"
          (click)="showAction(6)"
          class="btn btn-outline-danger m-btn m-btn--custom m-btn--outline"
        >
          <i class="fa fa-shopping-cart"></i>报废
        </button>
      </div>
      <div class="col-xs-6 text-right">
        <div class="btn-group">
          <button
            type="button"
            class="btn btn-outline-success dropdown-toggle"
            style="margin-right: 10px;"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            <i class="fa fa-file-excel-o"></i>Excel操作
          </button>
          <div class="dropdown-menu">
            <!-- 在 onlyLink 为 true 时， btnColor 将不再起作用 -->
            <excel-import
              [showIcon]="false"
              [onlyLink]="true"
              [btnColor]="'success'"
              [btnText]="'导入(按导出模板)'"
              (onUpload)="onUpload($event)"
            ></excel-import>
            <div class="dropdown-divider"></div>
            <a
              class="dropdown-item"
              href="javascript:;"
              (click)="exportToExcel(true)"
              >导出模板</a
            >
            <a
              class="dropdown-item"
              href="javascript:;"
              (click)="exportToExcel(false)"
              >导出所有数据</a
            >
          </div>
        </div>
        <button
          (click)="createOrEditToolingModal.show()"
          *ngIf="isGranted('Pages.Resource.Tooling.Operation')"
          class="btn btn-primary blue"
        >
          <i class="fa fa-plus"></i> 创建新的工装
        </button>
      </div>
    </div>
  </div>

  <div class="m-content">
    <div class="m-portlet m-portlet--mobile">
      <div class="m-portlet__body">
        <form class="horizontal-form" autocomplete="off">
          <div class="m-form m-form--label-align-right">
            <div class="row align-items-center m--margin-bottom-10">
              <div class="col-xl-12">
                <div class="form-group m-form__group align-items-center">
                  <div class="input-group">
                    <input
                      [(ngModel)]="filterText"
                      name="filterText"
                      autofocus
                      class="form-control m-input"
                      [placeholder]="l('SearchWithThreeDot')"
                      type="text"
                    />
                    <span class="input-group-btn">
                      <button
                        (click)="getToolings()"
                        class="btn btn-primary"
                        type="submit"
                      >
                        <i
                          class="flaticon-search-1"
                          [attr.aria-label]="l('Search')"
                        ></i>
                      </button>
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div
              class="row m--margin-bottom-10"
              [hidden]="!advancedFiltersAreShown"
            >
              <div class="col-md-6"><div class="m-checkbox-list"></div></div>
            </div>

            <div class="row margin-bottom-10" *ngIf="advancedFiltersAreShown">
              <div class="col-sm-12 text-right">
                <button class="btn btn-metal" (click)="getToolings()">
                  <i class="fa fa-refresh"></i> {{ l("Refresh") }}
                </button>
              </div>
            </div>
            <div class="row margin-bottom-10">
              <div class="col-sm-12">
                <span
                  class="clickable-item text-muted"
                  *ngIf="!advancedFiltersAreShown"
                  (click)="advancedFiltersAreShown = !advancedFiltersAreShown"
                  ><i class="fa fa-angle-down"></i>
                  {{ l("ShowAdvancedFilters") }}</span
                >
                <span
                  class="clickable-item text-muted"
                  *ngIf="advancedFiltersAreShown"
                  (click)="advancedFiltersAreShown = !advancedFiltersAreShown"
                  ><i class="fa fa-angle-up"></i>
                  {{ l("HideAdvancedFilters") }}</span
                >
              </div>
            </div>
          </div>
        </form>

        <div class="row align-items-center">
          <!-- <Primeng-TurboTable-Start> -->
          <div
            class="primeng-datatable-container"
            [busyIf]="primengTableHelper.isLoading"
          >
            <p-table
              #dataTable
              (onLazyLoad)="getToolings($event)"
              [value]="primengTableHelper.records"
              rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
              [paginator]="false"
              [lazy]="true"
              [scrollable]="true"
              ScrollWidth="100%"
              [responsive]="primengTableHelper.isResponsive"
              [resizableColumns]="primengTableHelper.resizableColumns"
            >
              <ng-template pTemplate="header">
                <tr>
                  <th
                    style="width: 130px"
                    [hidden]="!isGrantedAny('Pages.Resource.Tooling.Operation')"
                  >
                    {{ l("Actions") }}
                  </th>
                  <th style="width: 150px" pSortableColumn="title">
                    名称
                    <p-sortIcon field="title"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="subTitle">
                    工装图号
                    <p-sortIcon field="subTitle"></p-sortIcon>
                  </th>
                  <th style="width: 250px">对应产品图号</th>
                  <th style="width: 150px" pSortableColumn="model">
                    型号
                    <p-sortIcon field="model"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="stamp">
                    钢印号
                    <p-sortIcon field="stamp"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="location">
                    位置
                    <p-sortIcon field="location"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="category">
                    类别
                    <p-sortIcon field="category"></p-sortIcon>
                  </th>
                  <th style="width: 150px">工装类型</th>
                  <th style="width: 150px" pSortableColumn="manufactureDate">
                    制造日期
                    <p-sortIcon field="manufactureDate"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="intoStockDate">
                    入库日期
                    <p-sortIcon field="intoStockDate"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="receiptTime">
                    接收时间
                    <p-sortIcon field="receiptTime"></p-sortIcon>
                  </th>

                  <th style="width: 150px" pSortableColumn="manufacturer">
                    制造单位
                    <p-sortIcon field="manufacturer"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="groupParts">
                    组配件
                    <p-sortIcon field="groupParts"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="isDrawing">
                    有无图纸
                    <p-sortIcon field="isDrawing"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="certificate">
                    有无合格证
                    <p-sortIcon field="certificate"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="handover">
                    有无交接单
                    <p-sortIcon field="handover"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="toolingRecord">
                    有无履历卡
                    <p-sortIcon field="toolingRecord"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="isVerificationCard">
                    有无检定卡
                    <p-sortIcon field="isVerificationCard"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="isNeedVerification">
                    需周期检定
                    <p-sortIcon field="isNeedVerification"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="verificationDate">
                    鉴定日期
                    <p-sortIcon field="verificationDate"></p-sortIcon>
                  </th>
                  <th
                    style="width: 150px"
                    pSortableColumn="nextVerificationDate"
                  >
                    鉴定有效期
                    <p-sortIcon field="nextVerificationDate"></p-sortIcon>
                  </th>
                  <th style="width: 150px">其他资料</th>
                  <th style="width: 150px">工装来源</th>
                  <th style="width: 150px">最大载荷</th>
                  <th style="width: 150px">所属资产</th>
                  <th style="width: 150px">责任人</th>
                  <th style="width: 150px">工艺员</th>
                  <th style="width: 200px">备注</th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-record="$implicit">
                <tr>
                  <td
                    style="width: 130px"
                    [hidden]="!isGrantedAny('Pages.Resource.Tooling.Operation')"
                  >
                    <div class="btn-group dropdown" normalizePosition>
                      <button
                        class="dropdown-toggle btn btn-sm btn-primary"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                      >
                        <i class="fa fa-cog"></i><span class="caret"></span>
                        {{ l("Actions") }}
                      </button>
                      <ul class="dropdown-menu">
                        <li *ngIf="record.status === 3">
                          <a (click)="backStock(record)">入库</a>
                        </li>
                        <li *ngIf="record.status === 2">
                          <a (click)="cancelCar(record)">取消</a>
                        </li>
                        <li *ngIf="record.status === 1">
                          <a (click)="goCar(record, 1)">加入借出车</a>
                        </li>
                        <li *ngIf="record.status === 1">
                          <a (click)="goCar(record, 2)">加入返修车</a>
                        </li>
                        <li *ngIf="record.status === 1">
                          <a (click)="goCar(record, 3)">加入送检车</a>
                        </li>
                        <li *ngIf="record.status === 1">
                          <a (click)="goCar(record, 4)">加入技改车</a>
                        </li>
                        <li *ngIf="record.status === 1">
                          <a (click)="goCar(record, 5)">加入隔离车</a>
                        </li>
                        <li *ngIf="record.status === 1">
                          <a (click)="goCar(record, 6)">加入报废车</a>
                        </li>
                        <li
                          *ngIf="
                            record.status === 1 ||
                            (record.status === 2 && record.operation === 1)
                          "
                        >
                          <a (click)="outStock(record, 1)">借出/技改</a>
                        </li>

                        <li
                          *ngIf="
                            record.status === 1 ||
                            (record.status === 2 && record.operation === 2)
                          "
                        >
                          <a (click)="outStock(record, 2)">返修</a>
                        </li>

                        <li
                          *ngIf="
                            record.status === 1 ||
                            (record.status === 2 && record.operation === 3)
                          "
                        >
                          <a (click)="outStock(record, 3)">送检</a>
                        </li>
                        <li
                          *ngIf="
                            record.status === 1 ||
                            (record.status === 2 && record.operation === 4)
                          "
                        >
                          <a (click)="outStock(record, 4)">技改</a>
                        </li>
                        <li
                          *ngIf="
                            record.status === 1 ||
                            (record.status === 2 && record.operation === 5)
                          "
                        >
                          <a (click)="outStock(record, 5)">隔离</a>
                        </li>
                        <li
                          *ngIf="
                            record.status === 1 ||
                            (record.status === 2 && record.operation === 6)
                          "
                        >
                          <a (click)="outStock(record, 6)">报废</a>
                        </li>
                        <li>
                          <a (click)="toolingLogModal.show(record)">履历</a>
                        </li>
                        <li>
                          <a
                            (click)="createOrEditToolingModal.show(record.id)"
                            >{{ l("Edit") }}</a
                          >
                        </li>
                        <li>
                          <a (click)="deleteTooling(record)">{{
                            l("Delete")
                          }}</a>
                        </li>
                      </ul>
                    </div>
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 名称</span>
                    {{ record.title }}
                    <span class="m-badge m-badge--danger">{{
                      record.statusName
                    }}</span>
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 工装图号</span>
                    {{ record.subTitle }}
                  </td>
                  <td style="width: 250px" [title]="record.drawingCodes">
                    <span class="ui-column-title"> 对应产品图号</span>
                    {{ record.drawingCodes }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 型号</span>
                    {{ record.model }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 钢印号</span>
                    {{ record.stamp }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 位置</span>
                    {{ record.location }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 检定类别</span>
                    {{ record.categoryName }}
                    <span
                      *ngIf="
                        record.nextVerificationDate &&
                        record.nextVerificationDate.diff(nowMoment, 'days') <=
                          30
                      "
                    >
                      <span style="display:block;"
                        >送检日期:<br />
                        <b style="color:red;">
                          {{
                            record.nextVerificationDate
                              | momentFormat: "YYYY-MM-DD"
                          }}</b
                        >
                      </span>
                    </span>
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 工装类型</span>
                    {{ record.classificationName }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 制造日期</span>
                    {{ record.manufactureDate | momentFormat: "YYYY-MM-DD" }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 入库日期</span>
                    {{ record.intoStockDate | momentFormat: "YYYY-MM-DD" }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 接收时间</span>
                    {{ record.receiptTime | momentFormat: "YYYY-MM-DD" }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 制造单位</span>
                    {{ record.manufacturer }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 组配件</span>
                    {{ record.groupParts }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 有无图纸</span>
                    <span *ngIf="record.isDrawing === null"></span>
                    <span *ngIf="record.isDrawing">有</span>
                    <span *ngIf="record.isDrawing !== null && !record.isDrawing"
                      >无</span
                    >
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 有无合格证</span>
                    <span *ngIf="record.certificate === null"></span>
                    <span *ngIf="record.certificate">有</span>
                    <span
                      *ngIf="record.certificate !== null && !record.certificate"
                      >无</span
                    >
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 有无交接单</span>
                    <span *ngIf="record.handover === null"></span>
                    <span *ngIf="record.handover">有</span>
                    <span *ngIf="record.handover !== null && !record.handover"
                      >无</span
                    >
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 有无履历卡</span>
                    <span *ngIf="record.toolingRecord === null"></span>
                    <span *ngIf="record.toolingRecord">有</span>
                    <span
                      *ngIf="
                        record.toolingRecord !== null && !record.toolingRecord
                      "
                      >无</span
                    >
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 有无检定卡</span>
                    {{ record.isVerificationCard }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 需周期检定</span>
                    <span *ngIf="record.isNeedVerification">是</span>
                    <span *ngIf="!record.isNeedVerification">否</span>
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 鉴定日期</span>
                    {{ record.verificationDate | momentFormat: "YYYY-MM-DD" }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 鉴定有效期</span>
                    {{
                      record.nextVerificationDate | momentFormat: "YYYY-MM-DD"
                    }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 其他资料</span>
                    {{ record.groupParts }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 工装来源</span>
                    {{ record.toolingSource }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 最大载荷</span>
                    {{ record.maxLoad }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 所属资产</span>
                    {{ record.belongTo }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 责任人</span>
                    {{ record.responsible }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 工艺员</span>
                    {{ record.technologist }}
                  </td>
                  <td style="width: 200px">
                    <span class="ui-column-title"> 备注</span>
                    {{ record.remark }}
                  </td>
                </tr>
              </ng-template>
            </p-table>
            <div
              class="primeng-no-data"
              *ngIf="primengTableHelper.totalRecordsCount == 0"
            >
              {{ l("NoData") }}
            </div>
            <div class="primeng-paging-container">
              <p-paginator
                rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                #paginator
                (onPageChange)="getToolings($event)"
                [totalRecords]="primengTableHelper.totalRecordsCount"
                [rowsPerPageOptions]="
                  primengTableHelper.predefinedRecordsCountPerPage
                "
              >
              </p-paginator>
              <span class="total-records-count">
                共计：{{ primengTableHelper.totalRecordsCount }}
              </span>
            </div>
          </div>
          <!-- <Primeng-TurboTable-End> -->
        </div>
      </div>
    </div>
  </div>
  <createOrEditToolingModal
    #createOrEditToolingModal
    (modalSave)="getToolings()"
  ></createOrEditToolingModal>
  <actionToolingModal
    #actionToolingModal
    (modalSave)="getToolings()"
  ></actionToolingModal>
  <editOutOrBackToolingModal
    #editOutOrBackToolingModal
    (modalSave)="getToolings()"
  ></editOutOrBackToolingModal>
  <toolingLogModal #toolingLogModal></toolingLogModal>
</div>
